import React, { useState, useEffect } from 'react'
import "./Manner.css"
import { Space } from 'react-vant'
import { Down } from '@react-vant/icons'
import { WechatOutlined, QqOutlined, AlipayCircleOutlined } from '@ant-design/icons';
import { useNavigate ,useLocation} from "react-router-dom"
import { Button } from 'antd-mobile'

export default function Manner() {
  const location = useLocation()
  const { state } = location
  const navigate = useNavigate();
  const [values, setValues] = useState('微信支付');
  const change = (text) => {
    setValues(text)
  }
  return (
    <div className="body">
      <div className="top">
        <div className="return">
          <span className="icon">
            <Space gap={20}>
              <Down className="leftIcon" onClick={() => { navigate("/recharge") }} />
            </Space>
          </span>
          <span className="top-cart">充值方式</span>
        </div>
      </div>
      <div className="manner-text">请选择您要使用的充值方式</div>
      <div className='manner-center'>
        <div className="manner-logo">
          <Space gap={20}>
            <WechatOutlined style={{ fontSize: "35px" }} />
          </Space>
        </div>
        <div className="manner-texts">微信支付</div>
        <div className="manner-radio">
          <input type="radio" value={values} onChange={() => { change('微信支付') }} checked={values === "微信支付" ? true : false} className="radio" name="a" />
        </div>
      </div>
      <div className='manner-center'>
        <div className="manner-logo">
          <Space gap={20}>
            <AlipayCircleOutlined style={{ fontSize: "35px" }} />
          </Space>
        </div>
        <div className="manner-texts">支付宝</div>
        <div className="manner-radio">
          <input type="radio" value={values} onChange={() => { change('支付宝') }} checked={values === "支付宝" ? true : false} className="radio" name="a" />
        </div>
      </div>
      <div className='manner-center'>
        <div className="manner-logo">
          <Space gap={20}>
            <QqOutlined style={{ fontSize: "35px" }} />
          </Space>
        </div>
        <div className="manner-texts">QQ支付</div>
        <div className="manner-radio">
          <input type="radio" value={values} onChange={() => { change('QQ支付') }} checked={values === "QQ支付" ? true : false} className="radio" name="a" />
        </div>
      </div>

      <Button block color='primary' size='large' className='manner-button' loading='auto' loadingText='正在加载' onClick={async () => {
        navigate("/password",{state:state.price})
      }}>
        继续
      </Button>
    </div>
  )
}
